<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>人物关系案例2</title>
    <!-- 引入必要文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
  </head>
  <body>
    <!-- 创建可视化图表的容器 -->
    <div id="network" style="width: 95vw; height: 95vh"></div>
    <!-- 初始化图表 -->
    <script type="text/javascript">
      // 获取容器DOM，创建echarts对象
      let myChart = echarts.init(document.getElementById("network"));
      let option = {
        title: {
          text: "人物关系图可视化",
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
            },
          },
        },
        legend: {
          x: "center",
          show: true,
          data: ["夫妻", "战友", "亲戚"],
        },
        series: [
          {
            type: "graph",
            layout: "force",
            symbolSize: 45,
            focusNodeAdjacency: true,
            roam: true,
            categories: [
              {
                name: "夫妻",
                itemStyle: {
                  normal: {
                    color: "#009800",
                  },
                },
              },
              {
                name: "战友",
                itemStyle: {
                  normal: {
                    color: "#4592FF",
                  },
                },
              },
              {
                name: "亲戚",
                itemStyle: {
                  normal: {
                    color: "#3592F",
                  },
                },
              },
            ],
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12,
                },
              },
            },
            force: {
              repulsion: 1000,
            },
            edgeSymbolSize: [4, 50],
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10,
                },
                formatter: "{c}",
              },
            },
            data: [
              {
                name: "徐贱云",
                draggable: true,
              },
              {
                name: "冯可梁",
                category: 1,
                draggable: true,
              },
              {
                name: "邓志荣",
                category: 1,
                draggable: true,
              },
              {
                name: "李荣庆",
                category: 1,
                draggable: true,
              },
              {
                name: "郑志勇",
                category: 1,
                draggable: true,
              },
              {
                name: "赵英杰",
                category: 1,
                draggable: true,
              },
              {
                name: "王承军",
                category: 1,
                draggable: true,
              },
              {
                name: "陈卫东",
                category: 1,
                draggable: true,
              },
              {
                name: "邹劲松",
                category: 1,
                draggable: true,
              },
              {
                name: "赵成",
                category: 1,
                draggable: true,
              },
              {
                name: "陈现忠",
                category: 1,
                draggable: true,
              },
              {
                name: "陶泳",
                category: 1,
                draggable: true,
              },
              {
                name: "王德福",
                category: 1,
                draggable: true,
              },
            ],
            links: [
              {
                source: 0,
                target: 1,
                category: 0,
                value: "夫妻",
              },
              {
                source: 0,
                target: 2,
                value: "子女",
              },
              {
                source: 0,
                target: 3,
                value: "夫妻",
              },
              {
                source: 0,
                target: 4,
                value: "父母",
              },
              {
                source: 1,
                target: 2,
                value: "表亲",
              },
              {
                source: 0,
                target: 5,
                value: "朋友",
              },
              {
                source: 4,
                target: 5,
                value: "朋友",
              },
              {
                source: 2,
                target: 8,
                value: "叔叔",
              },
              {
                source: 0,
                target: 12,
                value: "朋友",
              },
              {
                source: 6,
                target: 11,
                value: "爱人",
              },
              {
                source: 6,
                target: 3,
                value: "朋友",
              },
              {
                source: 7,
                target: 5,
                value: "朋友",
              },
              {
                source: 9,
                target: 10,
                value: "朋友",
              },
              {
                source: 3,
                target: 10,
                value: "朋友",
              },
              {
                source: 2,
                target: 11,
                value: "同学",
              },
            ],
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0,
              },
            },
          },
        ],
      };
      // 使用配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
